<template>
  <div>
    <h1>记账App</h1>
    <form @submit.prevent="addRecord">
      <div>
        <label for="date">日期:</label>
        <input type="date" id="date" v-model="record.date">
      </div>
      <div>
        <label for="category">类别:</label>
        <input type="text" id="category" v-model="record.category">
      </div>
      <div>
        <label for="amount">金额:</label>
        <input type="number" id="amount" v-model="record.amount">
      </div>
      <button type="submit">添加记录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      record: {
        date: '',
        category: '',
        amount: null
      },
      records: []
    };
  },
  methods: {
    addRecord() {
      if (this.record.date && this.record.category && this.record.amount !== null) {
        this.records.push({ ...this.record });
        this.record.date = '';
        this.record.category = '';
        this.record.amount = null;
      }
    }
  }
};
</script>

<style scoped>
</style>